<template>
  <div class="mobilegames-conn mt-20" :class="{'mb-120': newAccount}" style="overflow: visible" v-show="show">
    <!--列表1-->
    <div class="mbilegames-list border-top" style="overflow: visible">
      <v-infinite-scroll :pageCount="pageCount" :start="start" :dataArr="list" :updateBottom="updateBottom">
        <div v-if="special" class="king-ad" @click="goSpecial">
          <img v-if="this.$route.params.gameName == '王者荣耀'"  src="//img1.5173.com/static/sy/images/banner/dl.jpg?v=201802281251" alt="王者荣耀代练">
           <img v-else="this.$route.params.gameName == '蜀门手游'"  src="~images/evaulation/king/shumen-banner.jpg" alt="蜀门手游活动图片">
        </div>
        <!--快销号-->
        <div class="ftsales-main bg-fff py-30 mb-20 border-bottom" v-if="quickList&&quickList.length &&(urlParams&&Number(urlParams.goodsType) === 2)">
          <div class="fthero-conn px-30 fl" v-for="(item,index) in quickList" @click="nextPage(item)" :class="{'border-right':index==0&&quickList.length>1,'w100':quickList.length==1}">
            <div class="fthero-wards">
              <div class="thpic f30 color-333">
                <span :style="{background: 'url('+ item.iconUrl +') no-repeat left center',backgroundSize: '0.29rem'}">{{item.categoryTypeName}}</span>
              </div>
              <div class="thtxt f24 color-888 mt-10">{{ item.iconDescription }}</div>
            </div>
          </div>
        </div>
        <ul>
          <li class="listware bg-fff border-bottom mb-20" v-for="item in list">
            <!-- 金币 -->
            <router-link :to="{name: 'MGCoinDetail',  params: {goodsId: item.id}, query: {gameName: gameName, gameId: gameId}}" v-if="urlParams && Number(urlParams.goodsType) === 3">
              <div class="ware-titl f32 color-000">{{item.title}}</div>
              <div class="ware-client f28 color-000">
                <span class="color-888">客户端：</span>{{item.region_name}}</div>
              <div class="ware-client f28 color-000">
                <span class="color-888">服务器：</span>{{item.server_name}}</div>
              <div class="ware-discount">
                <div class="dcnt-price f32 color-m1 text-right">{{item.price}}元</div>
                <div class="dcnt-stock f28 color-888" style="text-align: right">库存{{item.stockTotal}}</div>
              </div>
            </router-link>
            <!-- 账号-单图 -->
            <a v-else-if="switchState" @click="mobileDetailClick(item)">
              <div class="mbgmes-img fl">
                <div :class="{'img-center': newAccount}">
                  <img @click.stop="clickImg(item)" :src="item.goods_img" v-if="item.goods_img && item.goods_img.length > 1">
                  <img src="~images/default_img.jpg" v-else/>
                </div>
                <div class="picmun" v-if="item.small_img_list && item.small_img_list.length && item.small_img_list.length > 0">
                  <span class="f22 color-fff fontarial">{{item.small_img_list.length}}</span>
                </div>
              </div>
              <div class="mbgmes-con">
                <div class="mbl-title f30 color-000">{{item.title}}</div>
                <div class="mbl-cper">
                  <div class="mbl-money color-m1 f32 fl">￥{{item.price}}</div>
                  <div class="minus f20 color-fff ml-10 mt-15" v-if="item.couponInfo">{{item.couponInfo}}</div>
                  <div class="mbl-icon fr">
                    <i class="an" v-show="item.is_axm && item.is_axm === 'true'"></i>
                    <!--<i class="shou"></i>-->
                    <i class="mai" v-show="item.is_mjbx"></i>
                    <i class="tu" v-show="item.is_robot_capture && item.is_robot_capture==='true'"></i>
                    <i class="zhao" v-if="item.is_zhbp"></i>
                  </div>
                </div>
                <div class="mbl-parea color-666 f30">{{item.region_name}}/{{item.server_name}}</div>
              </div>
            </a>
            <!-- 账号-多图 -->
            <a v-else @click="mobileDetailClick(item)">
              <div class="hrgames-titl f30 color-000">{{item.title}}</div>
              <div class="hrgames-img my-20 row">
                <v-slide :item="item" @anyImgClick="anyImgClick" :paddingLeft="paddingLeft" :imgs="item.small_img_list" :key="item.id"></v-slide>
              </div>
              <div class="hrgames-tne">
                <span class="hr-price color-m1 f32">￥{{item.price}}</span>
                <span class="hr-area f26 color-666 ml-30">{{item.region_name}}/{{item.server_name}}</span>
              </div>
              <div class="hrgames-cfi f26 color-666" v-if="(item.is_axm && item.is_axm === 'true') || (item.is_robot_capture && item.is_robot_capture==='true') || item.is_mjbx || item.is_zhbp">
                <i class="firm mr-30 " v-show="item.is_axm && item.is_axm === 'true'">安心买</i>
                <i class="firm mr-30 " v-show="item.is_robot_capture && item.is_robot_capture==='true'">截图认证</i>
                <i class="firm mr-30 " v-show="item.is_mjbx">卖家保险</i>
                <i class="firm mr-30 " v-show="item.is_zhbp">找回包赔</i>
              </div>
            </a>
          </li>
        </ul>
        <!-- 没有更多商品 -->
        <div class="tab-empty" v-if="(start&&noNext)||(start&&list.length < pageCount)">
          <div class="empty-conn px-30">
            <div class="list-img"><img src="~images/gamelist.png"></div>
            <div class="emp-text f28 color-999 text-center">抱歉，没有更多商品了~</div>
          </div>
        </div>
      </v-infinite-scroll>
    </div>
    <div style="width: .3rem;height: 0;" ref="padding"></div>
  </div>
</template>
<script>
import infiniteCom from '../common/infinite_scroll.vue'
import slide from './swipe_slide.vue'

export default {
  props: ['newAccount', 'goodsList', 'scrollButton', 'switchState', 'show', 'filted', 'special', 'specialId', 'quickList', 'urlParams', 'gameName', 'gameId'],
  components: {
    'v-infinite-scroll': infiniteCom,
    'v-slide': slide
  },
  data() {
    return {
      start: false,
      noNext: false,
      selectList: [],
      selectIndex: 0,
      isSelect: false,
      paddingLeft: 0,
      appTrueTit: (this.$route.query.app ? this.$route.query.app : false)
    }
  },
  computed: {
    list() {
      return this.goodsList.list
    },
    pageCount() {
      return this.goodsList.pageCount
    }
  },
  watch: {
    list(val, old) {
      if (val === null) {
        this.start = false
        this.noNext = false
      }
      if (old === null && val !== null) {
        this.$nextTick(() => {
          this.start = true
        })
      }
    }
  },
  created() {
    
  },
  methods: {
    //app跳转页面 
    mobileDetailClick(item) {
      // item.id,(item.goods_source_type ? item.goods_source_type : 0),()
      let goodsId = item.id
      let sourceType = 0
      let source = this.filted ? '0001' : ''
      // 主站商品标记位1
      if ((this.newAccount && item.cqSourType == 1) || (!this.newAccount && item.goods_source_type == 1)) {
        sourceType = 1
      }
      if (this.$route.query.app) {
        if (source) {
          source = '&source=' + source
        } else {
          source = ''
        }
        // 注释保留 2018.4.1 yanjd@0.0.2
        // location.href = '/vue/mobile-game/account-detail/' + goodsId + '/' + sourceType + '?app=' + this.appTrueTit + source;
        if (Number(sourceType) === 0) {
          location.href = '/vue/mobile-game/account-detail/' + goodsId + '/' + sourceType + '?app=' + this.appTrueTit + source;
        } else {
          location.href = '/vue/mobile-game/account-detail-new/' + goodsId + '/' + sourceType + '?app=' + this.appTrueTit + source;
        }
      } else {
        // 注释保留 2018.4.1 yanjd@0.0.2
        // this.$router.push({
        //   name: 'MGAccountDetail',
        //   params: {
        //     goodsId: goodsId,
        //     goods_source_type: sourceType
        //   },
        //   query: {
        //     source: source
        //   }
        // })
        if (Number(sourceType) === 0) {
          this.$router.push({
            name: 'MGAccountDetail',
            params: {
              goodsId: goodsId,
              goods_source_type: sourceType
            },
            query: {
              source: source
            }
          })
        } else {
          this.$router.push({
            name: 'MGAccountDetailNew',
            params: {
              goodsId: goodsId,
              goods_source_type: sourceType
            },
            query: {
              source: source,
              channelId: this.$route.query.channelId
            }
          })
        }
      }

    },
    goSpecial() {
      if (this.$route.query.app) {
        location.href = '/vue/special/' + this.specialId + '?app=true';
      } else {
        if (this.$route.params.gameName == '王者荣耀') {
          location.href = 'https://m.5173.com/vue/dl/dl-wzry?source=0020'
          this.$router.push({ path: '/vue/dl/dl-wzry', query: source})
        } else if (this.$route.params.gameName == '蜀门手游') {
          this.$router.push({ name: 'SpecialKingList', params: { id: this.specialId,}, query: { gameName: 'shudoor',app: this.$route.query.app }})
        }
        
      }
    },
    anyImgClick({ index, item }) {
      this.$emit('clickImg', { index, item })
    },
    clickImg(item) {
      this.$emit('clickImg', { index: 0, item })
    },
    nextPage(item) {
      if (item.unitList && item.unitList.length > 0) {
        if (this.appTrueTit) {
          location.href = '/vue/mobileGameQuick2/' + this.gameId + '/' + item.categoryTypeName + '/' + item.gamePlatformId + '/' + item.unitList[0] + '?app=' + this.appTrueTit;
        } else {
          this.$router.push({
            name: 'mobileGameQuick2',
            params: {
              gameId: this.gameId,
              categoryTypeName: item.categoryTypeName,
              gamePlatformId: item.gamePlatformId,
              gameStartAccountUnit: item.unitList[0]
            }
          })
        };

      }
    },
    getQuickTitle(item) {
      var titileList = ['即买即玩，找回包赔！', '官方直销，安全有保障！'], index = 0
      if (item.categoryTypeName != '英雄号') {
        index = 1
      }
      return titileList[index]
    },
    updateBottom() {
      return this.scrollButton().then(d => {
        if (d) this.noNext = true
        return d
      })
    }
  }
}
</script>
<style scoped>
.img-center {
  margin-left: -400px;
  margin-right: -400px;
}
.img-center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.w100 {
  width: 100%;
}

.picmun {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.52rem;
  height: 0.28rem;
  line-height: 0.26rem;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
}

.picmun span {
  display: inline-block;
  background: url("~images/Icon/picmun-ico.png") no-repeat left center;
  height: 0.22rem;
  background-size: 0.18rem;
  padding-left: 0.22rem;
}

.disabled {
  background-color: #999;
}

.king-ad {
  width: 100%;
  max-width: 768px;
  height: 1.8rem;
  max-height: 180px;
}

.listware {
  padding: 15px;
}

.fade-enter-active {
  transition: all 0.3s ease;
}

.fade-leave-active {
  transition: all 1s ease;
}

.fade-enter,
.fade-leave-active {
  transform: translateX(100%);
}

.ConBox {
  margin: 0;
  left: 0;
  z-index: 999;
  position: fixed;
  overflow: hidden;
}

.ConBox .Jbox {
  width: 100%;
  background: white;
  overflow: scroll;
  height: 100vh;
  top: 0;
  z-index: 20;
  padding-bottom: 2rem;
}

.quick-title {
  height: inherit;
  max-height: 1.6rem;
}

.listware {
  padding: 15px;
}

a {
  display: block;
}

.row {
  height: 81px !important;
  margin-right: -15px;
  width: auto !important;
}
.mb-120{
  margin-top: 1.2rem!important;
}
</style>
